<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'
import slider2 from '@/components/slider2.vue';
// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const num = ref('1')
const back = () => {
  router.go(-1);
}
const go1 = () => {
  router.push({ path: '/ParticularsView' })
}
const go2 = () => {
  router.push({ path: '/ShopListView' })
}

const items = ref([
  {
    id: 1,
    name: "玫瑰",
    size: "55CM",
    brand: "品牌玫瑰",
    price: 18.7,
    img: "/public/images/index-hua1.png",
    quantity: 0,
    category: "玫瑰",
    a: 0
  },
  {
    id: 2,
    name: "向日葵",
    size: "55CM",
    brand: "品牌向日葵",
    price: 18.7,
    oldPrice: "19.2",
    img: "/public/images/index-hua2.png",
    quantity: 0,
    category: "向日葵",
    a: 0
  },
  {
    id: 3,
    name: "夜莺",
    size: "55CM",
    brand: "品牌夜莺",
    price: 30.7,
    img: "/public/images/free03.png",
    quantity: 0,
    category: "夜莺",
    a: 0
  },
  {
    id: 4,
    name: "康乃馨",
    size: "55CM",
    brand: "品牌夜莺",
    price: 25.7,
    img: "/public/images/free04.png",
    quantity: 0,
    category: "康乃馨",
    a: 0
  },
  {
    id: 5,
    name: "百合",
    size: "55CM",
    brand: "品牌百合",
    price: 26.7,
    img: "/public/images/free05.png",
    quantity: 0,
    category: "百合",
    a: 0
  },
  {
    id: 6,
    name: "菊花",
    size: "55CM",
    brand: "品牌夜莺",
    price: 15.7,
    img: "/public/images/index-hua6.png",
    quantity: 0,
    category: "菊花",
    a: 0
  },
  {
    id: 7,
    name: "绣球花",
    size: "55CM",
    brand: "品牌夜莺",
    price: 10.7,
    img: "/public/images/index-hua7.png",
    quantity: 0,
    category: "绣球花",
    a: 0
  },
  {
    id: 8,
    name: "洋桔梗",
    size: "55CM",
    brand: "品牌夜莺",
    price: 40.7,
    img: "/public/images/recomment-evaluate.png",
    quantity: 0,
    category: "洋桔梗",
    a: 0
  },
  {
    id: 9,
    name: "草花",
    size: "55CM",
    brand: "品牌夜莺",
    price: 35.7,
    img: "/public/images/recomment-img.png",
    quantity: 0,
    category: "草花",
    a: 0
  },
]);
const sortedItems = ref([...items.value]);

const sortByPriceAscending = () => {
  if (sortedItems.value[0].quantity <= 1) {
    console.log('升序', sortedItems.value);
    sortedItems.value = [...items.value].sort((a, b) => a.price - b.price);
  }else {
    console.log('升序2', sortedItems.value);
    sortedItems.value = [...items.value].sort((a, b) => a.a - b.a);
  }
};

const sortByPriceDescending = () => {
  console.log('降序', sortedItems);
  sortedItems.value = [...items.value].sort((a, b) => b.price - a.price);
  console.log(sortedItems.value[0].price * sortedItems.value[0].quantity);
};
const jia = (item, index) => {
  // 增加数量
  sortedItems.value[index].quantity++;
  // 重新计算总价
  const factor = Math.pow(10, 2);
  const total = sortedItems.value[index].quantity * sortedItems.value[index].price;
  // return Math.round(number * factor) / factor;
  console.log(Math.round(total * factor) / factor);
  sortedItems.value[index].a = Math.round(total * factor) / factor;
}
const jan = (item, index) => {
  // 减少数量
  sortedItems.value[index].quantity--;
  // 重新计算总价
  const price1 = sortedItems.value[index].price
  const factor = Math.pow(10, 2);
  const total = sortedItems.value[index].a - price1
  console.log(Math.round(total * factor) / factor);
  sortedItems.value[index].a = Math.round(total * factor) / factor;
  // const price1 = sortedItems.value[index].price
  // sortedItems.value[index].a = sortedItems.value[index].a - price1
}
</script>

<template>
  <div id="box">
    <!-- 导航 -->
    <div class="navBox">
      <div class="navBox_title">
        <div style="width: 42%;"><van-icon name="arrow-left" @click="back" /></div>
        <div>自选大厅</div>
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="ov_box">
      <div class="fl_Box_top">
        <van-search placeholder="搜索花材/供应商" shape="round" />
        <div class="fl_Box_top_font">搜索</div>
      </div>
    </div>
    <!-- 分类列表 -->
    <div class="sort_box">
      <div class="sort_box_left">
        <div :class="num == 1 ? 'active' : ''" @click="num = 1">
          <text>推荐</text>
        </div>
        <div :class="num == 2 ? 'active' : ''" @click="num = 2">
          <text>玫瑰</text>
        </div>
        <div :class="num == 3 ? 'active' : ''" @click="num = 3">
          <text>康乃馨</text>
        </div>
        <div :class="num == 4 ? 'active' : ''" @click="num = 4">
          <text>百合</text>
        </div>
        <div :class="num == 5 ? 'active' : ''" @click="num = 5">
          <text>菊花</text>
        </div>
        <div :class="num == 6 ? 'active' : ''" @click="num = 6">
          <text>绣球花</text>
        </div>
        <div :class="num == 7 ? 'active' : ''" @click="num = 7">
          <text>洋桔梗</text>
        </div>
        <div :class="num == 8 ? 'active' : ''" @click="num = 8">
          <text></text>草花
        </div>
        <div :class="num == 9 ? 'active' : ''" @click="num = 9">
          <text>配花</text>
        </div>
        <div :class="num == 10 ? 'active' : ''" @click="num = 10">
          <text>配叶</text>
        </div>
        <div :class="num == 11 ? 'active' : ''" @click="num = 11">
          <text>包装</text>
        </div>
      </div>
      <div class="sort_box_right">
        <div class="sort_box_right_top">
          <div class="sort_box_right_top1">
            <div class="sort_box_right_top11">价格</div>
            <div class="sort_box_right_top12">
              <div class="right_img">
                <img src="/public/images/shang.png" alt="" @click="sortByPriceAscending">
              </div>
              <div class="right_img">
                <img src="/public/images/xia.png" alt="" @click="sortByPriceDescending">
              </div>
            </div>
          </div>
          <div class="sort_box_right_top1">
            <div class="sort_box_right_top11">等级</div>
            <div class="sort_box_right_top12">
              <div class="right_img">
                <img src="/public/images/shang.png" alt="">
              </div>
              <div class="right_img">
                <img src="/public/images/xia.png" alt="">
              </div>
            </div>
          </div>
          <div class="sort_box_right_top1">
            <div class="sort_box_right_top11">销量</div>
            <div class="sort_box_right_top12">
              <!-- <div class="right_img">
                <img src="/public/images/shang.png" alt="">
              </div> -->
              <div class="right_img2">
                <img src="/public/images/xia.png" alt="">
              </div>
            </div>
          </div>
          <div class="sort_box_right_top1">
            <div style="text-align: center;font-size: 14px;width: 100%;">选颜色</div>
          </div>
        </div>
        <div class="sort_box_right_bottom">
          <div v-show="num == 1">
            <div class="bottom_box" v-for="(item, index) in sortedItems" :key="item.name">
              <div class="bottom_box_img" @click="go2">
                <img :src="item.img" alt="">
              </div>
              <div class="bottom_box_text" @click="go2">
                <div>
                  {{ item.name }}
                  <text style="color: #fff;background-color: #fda461;font-size: 14px;padding: 2px 8px;">
                    {{ item.size }}
                  </text>
                </div>
                <div style="font-size: 12px;">
                  <text style="color: #ff5050;background-color: #fbe9ee;padding: 2px 5px;">
                    {{ item.brand }}
                  </text>&nbsp;
                  供应充足
                </div>
                <div style="color: #ff5050;font-size: 18px;font-weight: 600;">
                  ￥<text v-show="item.a == 0">{{ item.price }}</text>
                  <text v-show="item.a > 0">{{ item.a }}</text>
                  <text style="font-size: 14px;text-decoration: line-through;color: #999999;">{{ item.oldPrice }}</text>
                </div>
              </div>
              <div class="bottom_box_prc" v-show="item.quantity >= 1">
                <div @click="jan(item, index)"
                  style="height: 33%;border-bottom: 1.5px solid #8f8f8f;line-height: 28px;text-align: center;font-size: 24px;">
                  -
                </div>
                <div style="height: 34%;border-bottom: 1.5px solid #8f8f8f;line-height: 30px;text-align: center;">
                  {{ item.quantity }}
                </div>
                <div @click="jia(item, index)"
                  style="height: 33%;line-height: 28px;text-align: center;font-size: 24px;">
                  +
                </div>

              </div>
              <div v-show="item.quantity < 1" @click="item.quantity++" class="bottom_box_prc1">
                +
              </div>
            </div>
          </div>
          <div v-show="num == 2">html内2</div>
          <div v-show="num == 3">html内3</div>
          <div v-show="num == 4">html内4</div>
          <div v-show="num == 5">html内5</div>
          <div v-show="num == 6">html内6</div>
          <div v-show="num == 7">html内7</div>
          <div v-show="num == 8">html内8</div>
          <div v-show="num == 9">html内9</div>
          <div v-show="num == 10">html内1容</div>
          <div v-show="num == 11">html内1容</div>
        </div>
      </div>
    </div>
    <!-- 底部slider -->
    <div class="ov_footer" @click="go1">
      <slider2></slider2>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {

  // 导航
  .navBox {
    height: 50px;
    background-color: #f84c55;

    .navBox_title {
      color: #fff;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
    }
  }

  // 搜索框
  .ov_box {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;

    .fl_Box_top {
      width: 95%;
      margin: auto;
      position: relative;

      .fl_Box_top_font {
        height: 34px;
        background-color: #f96e75;
        color: #fff;
        width: 70px;
        line-height: 34px;
        text-align: center;
        border-radius: 0 20px 20px 0;
        font-size: 12px;
        padding: 0 10px;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .van-search {
        padding: 0;
        border-radius: 20px;
        box-sizing: border-box;
        box-shadow: 5px 5px 5px #ccc;
      }
    }
  }

  // 分类列表
  .sort_box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 120px;

    .sort_box_left {
      width: 20%;
      box-sizing: border-box;

      div {
        border-top: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
        padding: 15px 0;
        text-align: center;
        background-color: #f6f6f6;
        box-sizing: border-box;
      }

      .active {
        color: #ff5050;
        font-weight: bold;
        background-color: #fff;

        text {
          width: 100%;
          display: block;
          border-left: 5px solid #ff5050;
        }
      }
    }

    .sort_box_right {
      width: 80%;
      padding: 10px;
      box-sizing: border-box;

      .sort_box_right_top {
        display: flex;
        justify-content: space-between;

        .sort_box_right_top1 {
          width: 23%;
          height: 30px;
          line-height: 30px;
          color: #666666;
          background-color: #f0f0f0;
          border-radius: 50px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;

          .sort_box_right_top11 {
            width: 60%;
            text-align: center;
            font-size: 14px;
          }

          .sort_box_right_top12 {
            width: 40%;

            .right_img {
              height: 50%;
              box-sizing: border-box;
              position: relative;

              img {
                height: 12px;
                position: absolute;
                top: 15%;
              }
            }

            .right_img2 {
              height: 50%;
              box-sizing: border-box;
              position: relative;

              img {
                height: 12px;
                position: absolute;
                top: 50%;
              }
            }
          }
        }
      }

      .sort_box_right_bottom {
        margin-top: 15px;

        .bottom_box {
          display: flex;
          justify-content: space-between;
          padding-bottom: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #e9e9e9;
          margin-bottom: 10px;

          .bottom_box_img {
            width: 32%;
            height: 97px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }

          .bottom_box_text {
            width: 52%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            padding-left: 5px;
            box-sizing: border-box;

            div {
              width: 100%;
            }
          }

          .bottom_box_prc {
            width: 15%;
            border: 1.5px solid #8f8f8f;
            border-radius: 5px;
          }

          .bottom_box_prc1 {
            width: 15%;
            border: 1.5px solid #8f8f8f;
            border-radius: 5px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 24px;
            margin-top: 22%;
          }
        }
      }
    }
  }

  // 底部slider
  .ov_footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
  }
}
</style>